<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getList} from "@/api";
import {Ntf} from "@/api/type";


const ntfList = ref<Ntf[]>([])
const getData = ()=>{
  getList().then((res) => {
    if (!res){
      return
    }
    //只要六个
    ntfList.value = res.lists.slice(0,6) as Ntf[]
  })
  setTimeout(getData, 1000*60)
}
const baseUrl = ""
onMounted(async () => {
  //每10秒获取一次数据
   getData();

});
//保留两位小数
const toFixed = (num: number) => {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
</script>

<template>
  <div class="overflow-hidden box-border p-3 container lg:h-screen xl:flex justify-center items-center font-body text-jacarta-500" itemscope
       >
    <main class="flex-1">
      <!-- Trending Categories -->
      <section class="">
        <div class="container">
          <!-- Grid -->
          <div class="grid grid-cols-1 gap-[1rem] md:grid-cols-2 lg:grid-cols-3">
            <article v-for="(item,index) in ntfList" :key="index">
              <div
                  class="block rounded-2.5xl border border-jacarta-100 bg-white p-[1.1875rem] transition-shadow hover:shadow-lg dark:border-jacarta-700 dark:bg-jacarta-700"
              >
                <figure class="relative">
                  <p>
                    <img
                        :src="baseUrl+item.pic"
                        alt="item 5"
                        class="w-full h-[10rem] object-cover rounded-[0.625rem]"
                        loading="lazy"
                    />
                  </p>
                </figure>
                <div class="mt-4 flex items-center justify-between">
                  <p>
                    <span class="font-display text-base text-jacarta-700 hover:text-accent dark:text-white"
                    >{{item.name}}</span
                    >
                  </p>
                </div>
                <div class="mt-1 grid grid-cols-2 gap-2">
                  <div class="text-sm flex flex-col">
                    <span class="mr-1 text-jacarta-500 dark:text-jacarta-200 text-xs font-bold font-bold">volume</span>
                    <span class="text-jacarta-700 dark:text-jacarta-100 font-bold text-base">{{toFixed(item.volume)}}</span>
                  </div>
                  <div class=" text-sm  flex flex-col">
                    <span class="mr-1 text-jacarta-500 dark:text-jacarta-200 text-xs font-bold">24h</span>
                    <span class="text-jacarta-700 dark:text-jacarta-100 font-bold text-base">{{toFixed(item.v_24h)}}%</span>
                  </div>
                  <div class=" text-sm  flex flex-col">
                    <span class="mr-1 text-jacarta-500 dark:text-jacarta-200 text-xs font-bold">owner</span>
                    <span class="text-jacarta-700 dark:text-jacarta-100 font-bold text-base">{{item.owner}}</span>
                  </div>
                  <div class=" text-sm  flex flex-col">
                    <span class="mr-1 text-jacarta-500 dark:text-jacarta-200 text-xs font-bold">floor</span>
                    <span class="text-jacarta-700 dark:text-jacarta-100 font-bold text-base">{{toFixed(item.floor)}}</span>
                  </div>
                  <div class=" text-sm  flex flex-col">
                    <span class="mr-1 text-jacarta-500 dark:text-jacarta-200 text-xs font-bold">items</span>
                    <span class="text-jacarta-700 dark:text-jacarta-100 font-bold text-base">{{item.items}}K</span>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>
      <!-- end trending categories -->
    </main>
  </div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
